<template>
  <div class="box">
    <!-- 日志 -->
    <!-- 记录 -->
    <div class="record">
      <i class="el-icon-info"></i>
      <span>共 0 条记录</span>
    </div>
    <!-- 记录 -->
    <!-- table 表格数据区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="操作类型" width="200">
      </el-table-column>
      <el-table-column prop="name" label="操作人" width="200">
      </el-table-column>
      <el-table-column prop="address" label="执行结果" width="200">
      </el-table-column>
      <el-table-column prop="time" label="操作时间" width="200">
      </el-table-column>
      <el-table-column prop="describe" label="描述" width="200">
      </el-table-column>
    </el-table>
    <!-- table 表格数据区域 -->
    <!-- 分页组件区域 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryObj.current"
        :page-size="queryObj.pageSize"
        layout=" prev, pager, next, sizes, jumper"
        :page-sizes="[10, 20, 30, 50]"
        background
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 分页组件区域 -->
  </div>
</template>

<script>
export default {
  name: 'base-dailyRecord',
  data () {
    return {
      tableData: [
        {
          date: 'us',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          time: '1985-10-08 21:21:00',
          describe: '88.88'
        },
        {
          date: 'us',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          time: '1985-10-08 21:21:00',
          describe: '88.88'
        },
        {
          date: 'us',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          time: '1985-10-08 21:21:00',
          describe: '88.88'
        },
        {
          date: 'us',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          time: '1985-10-08 21:21:00',
          describe: '88.88'
        }
      ],
      queryObj: {
        current: 1, // 控制当前页
        pageSize: 10 // 控制每一页有几条数据
      }
    }
  },
  computed: {},
  watch: {},
  methods: {},
  created () {},
  mounted () {},
  beforeDestroy () {}
}
</script>

<style lang="less" scoped>
.box {
  padding: 20px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  margin: 20px;
  .record {
    width: 100%;
    margin: 20px 0;
    background-color: #f4f4f5;
    color: #909399;
    padding: 8px 16px;
    span {
      padding: 0 8px;
      font-size: 13px;
      line-height: 18px;
    }
  }
  .el-table {
    width: 100%;
    ::v-deep .el-table__header-wrapper {
      border-bottom: 2px solid #e8e8e8;
      .hidden-columns {
        background-color: #fafafa;
      }
    }
    ::v-deep .el-table__cell {
      text-align: center;
    }
    ::v-deep .el-table_2_column_8 {
      text-align: left;
    }
  }
  .block {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    ::v-deep .el-pagination__jump {
      margin-left: 0;
    }
  }
}
</style>
